<!-- From Uiverse.io by Shubh0408  - Tags: button, tailwindbutton, tailwindcss -->
<button class="cursor-pointer">
  <label class="flex justify-center items-center">
    <div class="w-fit p-1 m-2 rounded-md border shadow-2xl">
      <div
        class="relative rounded-full shadow-[0px_3px_10px_0px_rgba(156,156,156,0.75)_inset] hover:shadow-[0px_-3px_10px_0px_rgba(156,156,156,0.75)_inset] px-4 py-2 duration-700 flex justify-center items-center overflow-hidden"
      >
        <input type="checkbox" class="peer hidden" />
        <span
          class="absolute -top-5 left-[1.2rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[100ms]"
          >S</span
        >
        <span
          class="absolute -top-5 left-[1.7rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[200ms]"
          >u</span
        >
        <span
          class="absolute -top-5 left-[2.25rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[250ms]"
          >b</span
        >
        <span
          class="absolute -top-5 left-[2.8rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[350ms]"
          >m</span
        >
        <span
          class="absolute -top-5 left-[3.65rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[300ms]"
          >i</span
        >
        <span
          class="absolute -top-5 left-[4rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[350ms]"
          >t</span
        >
        <span
          class="absolute -top-5 left-[4.4rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[400ms]"
          >t</span
        >
        <span
          class="absolute -top-5 left-[4.9rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[450ms]"
          >e</span
        >
        <span
          class="absolute -top-5 left-[5.4rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[500ms]"
          >d</span
        >
        <svg
          width="19"
          height="19"
          viewBox="0 0 0.6 0.6"
          fill="none"
          class="peer-checked:translate-x-24 peer-checked:rotate-45 duration-1000 fill-black peer-checked:fill-green-700 mr-1"
        >
          <path
            d="M.356.541C.327.541.285.52.252.421L.234.367.18.349C.081.316.06.274.06.245S.081.174.18.141L.392.07Q.473.043.517.084C.561.125.55.155.532.209L.461.421c-.033.1-.075.12-.104.12M.191.176C.122.199.097.227.097.245s.025.046.094.069l.063.021q.009.003.012.012L.287.41C.31.479.338.504.356.504S.402.479.425.41L.496.198Q.516.138.49.112C.464.086.442.094.404.106z"
          ></path>
          <path
            d="M.253.36A.02.02 0 0 1 .24.354a.02.02 0 0 1 0-.027l.09-.09C.337.23.349.23.357.237s.007.019 0 .027l-.09.09A.02.02 0 0 1 .254.36"
          ></path>
        </svg>
        <span class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[0ms]"
          >S</span
        >
        <span
          class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[50ms]"
          >e</span
        >
        <span
          class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[100ms]"
          >n</span
        >
        <span
          class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[150ms]"
          >d</span
        >
        <span
          class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[250ms]"
          >&nbsp;</span
        >
        <span
          class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[300ms]"
          >M</span
        >
        <span
          class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[350ms]"
          >e</span
        >
        <span
          class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[400ms]"
          >s</span
        >
        <span
          class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[450ms]"
          >s</span
        >
        <span
          class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[500ms]"
          >a</span
        >
        <span
          class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[550ms]"
          >g</span
        >
        <span
          class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[600ms]"
          >e</span
        >
      </div>
    </div>
  </label>
</button>


    